<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

<h3>Notification</h3>
<button id="hello">Say hello to server!</button>
<button id="helloAll">Say hello to everyone</button>

<div id="listNot">

</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script>
    var notification = io.connect('http://localhost/notification');
    var messages = [];

    $(document).ready(function(){
    });

    notification.on('connect', function(){
        $('#listNot').append('<p>Connected</p>');
    })

    notification.on('message',function(data){
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            $('#listNot').html = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    $('html').on('click','#hello',function(){
        notification.emit('hello',{
            message: "Hello baby!!"
        });
    });

    $('html').on('click','#helloAll',function(){
        notification.emit('helloAll',{
            message: "Hello all baby online"
        });
    });
</script>
</body>
</html>